<template>
  <div class="menu">
    <x-header :left-options="{showBack: false,  backText:''}">订单</x-header>
    <tab active-color="#ff4d4d" class="tabFix">
      <tab-item selected @on-item-click="handlerA">接单</tab-item>
      <tab-item @on-item-click="handlerB">我的</tab-item>
    </tab>
    
    <div class="menu-wrap" v-show="isA">
        <transition-group name="slide-fade">
        <div class="card" v-for="item in menulist" v-show="item.id" v-bind:key="item">
          <div class="card-head">
            <div class="head-l"><img :src="item.avatar" alt=""></div>
            <div class="head-r">
              <p class="head-name">{{item.recipient}}</p>
              <small>{{item.paid_at}}</small>
            </div>
          </div>
          <ul class="info-list">
            <li><span></span>取餐点:&nbsp;&nbsp;{{item.canteen_shop}}</li>
            <li><span></span>收货地址:&nbsp;&nbsp;{{item.delivery_address}}</li>
            <li><span></span>送达时间:&nbsp;&nbsp;{{item.appointment_at}}</li>
          </ul>

          <div class="menu-foot">
            <p class="foot-l">本单收入: <span>{{item.fee*0.01}}元</span></p>
            <p class="foot-r" @click="taken(item)">抢单</p>
          </div>
        </div></transition-group>
    </div>


    <div v-show="isB">
    
    <div class="card" v-for="item in orderlist" @click="route(item)">
      <div class="weui-form-preview__item">
          <p class="">{{item.canteen_shop}}<div class="status">{{item.status}}</div></p>{{item.appointment_at}}
      </div>

      <div class="weui-form-preview">
          <div class="weui-form-preview__bd">
              <div class="weui-form-preview__item" v-for="key in item.food_items">
                  <label class="weui-form-preview__label"><span></span>{{key.name}}</label>
                  <span class="weui-form-preview__value">X{{key.quantity}}</span>
              </div>
          </div>
      </div>
      <div class="form-p">共{{item.food_count}}件商品,实付 &nbsp;&nbsp;￥{{item.total}}</div>
    </div>

    <Nodata v-if="myShow"></Nodata>

    </div>
    
    <div class="push" v-show="pushInfo">
        <p class="title">官方公告</p>
        <div class="content">
          <p>1.带餐人员送到后,务必请下单者点击“确认收货”，否则无法进行余额提现。</p>
          <p>2.接单后却不配送大于3单(含3单)者，对该账号处以一星期制裁，制裁期间不能进行接单行为。</p>
        </div>
        <div class="foot" @click="pushInfo =!pushInfo">确认</div>
    </div>
    <div class="weui-mask" style="z-index:1004" @click="pushInfo =!pushInfo" v-show="pushInfo"></div>

    <Mstatus ref="mt"></Mstatus>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, TabItem, Sticky, XHeader, Toast, Scroller } from 'vux'
import Tabbar from 'components/common/Tabbar'
import Nodata from 'components/common/Nodata'
import Mstatus from 'components/menu/Mstatus'

export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    XHeader,
    Toast,
    Mstatus,
    Tabbar,
    Nodata,
    Scroller
  },
  data () {
    return {
      isA:true,
      isB:false,
      menulist:null,
      orderlist:null,
      showList1: true,
      scrollTop: 0,
      myShow:false,
      takeId:null,
      pushInfo:true,
    }
  },
  methods: {
    getTakelist() {
      let ajaxUrl = '/api/orders/takelist?updown=down&id=0';
      this.$http.get(ajaxUrl).then((res)=>{
          this.menulist = res.body.data;
          if(this.menulist.length!=0){
            this.takeId = this.menulist[0].id;
          }else{
            this.takeId = 0;
          }
      });
    },
    handlerA:function(){
      this.isA = true,
      this.isB = false;
    },
    handlerB:function(){
      this.isA = false,
      this.isB = true;
    },
    taken:function(item){
      var _this = this;
      this.$http.get('/api/order/taken/'+item.id).then(function(res){
        _this.$refs.mt.getTaken();
        item.id = 0;
      });
    },
    route:function(item){
      const id = item.id;
      this.$router.push({ path: 'Menudetail', query: { id: id }})
    },
    pullDown() {
      let ajaxUrl = '/api/orders/takelist?updown=down&id='+this.takeId;
      this.$http.get(ajaxUrl).then((res) => {
        let data  = res.body.data;
        let _this = this;
        if(data.length==0){
          this.status.pulldownStatus = 'disabled';
          this.getTakelist();
        }else{
          for(var i=0;i<data.length;i++){
            _this.menulist.unshift(data[i]);
          }
          this.takeId = this.menulist[0].id;
        }
        setTimeout(function(){
          _this.$refs.pull.donePulldown();
        },1000);
      });
    },
  },
  created(){
    this.$http.get('/api/wx/js').then((res) => {
      console.log(res.body);
      console.log(res.body.jsApiList);
      wx.config({
          debug: false, // 
          appId: res.body.appId, // 
          timestamp: Date.parse(new Date()) / 1000, 
          nonceStr: res.body.nonceStr, 
          signature: res.body.signature,
          jsApiList: res.body.jsApiList 
      });
      var _this = this;
      wx.getLocation({
          type: 'wgs84', 
          success: function (res) {
              var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
              var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
              var speed = res.speed; // 速度，以米/每秒计
              var accuracy = res.accuracy; // 位置精度
              var id = JSON.parse(localStorage.getItem("userId"));
              //alert('纬度'+latitude);
              _this.$http.post('/api/locations/'+id,{user_id:id,x:latitude,y:longitude}).then((res) => {
                //alert('获取位置成功');
                console.log('获取位置成功');
              }).catch(function(){
                console.log('发送失败');
                //alert('获取位置失败');
              });
          }
      });

    })
  },
  mounted:function(){
    this.getTakelist();

    let ajaxApi = '/api/orders/receiving/me?updown=down&id=0';
    this.$http.get(ajaxApi).then((res) => {
      this.orderlist = res.body.data;
      if(res.body.data.length==0){
        this.myShow=true
      }
    });
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
/* 接单动画效果 */
.slide-fade-enter-active {
  transition: all .4s ease;
}
.slide-fade-leave-active {
  transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
  transform: translateY(-200px);
  opacity: 0;
}
.tabFix{
  position: fixed;
  top:46px;
  left:0;
  width:100%;
  z-index: 1003;
}
.menu{
  padding-top:92px;
  padding-bottom:65px;
}
.vux-header{
  background-color:#ff4d4d;
}
.menu-foot{
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: space-between;
  padding-top:0.5rem;
  border-top:1px solid #bababa;
  font-size:18px;
}
.foot-l{
  flex:3;
  padding:0.5rem;
}
.foot-r{
  flex:1;
  background-color:#ff4d4d;
  color:#fff;
  text-align:center;
  border-radius:12px;
  padding:0.5rem;
}
.foot-l span{
  color:#ff4d4d;
  margin-left:8px;
}
.card{
  margin-top:1rem;
  background-color:#fff;
  padding:1rem 2rem;
  font-size:16px;
}
.card ul{
  list-style: none;
}
.card-head{
  display: -webkit-flex; /* Safari */
  display: flex;
  border-bottom:1px solid #bababa;
}
.head-l img{
  width:4rem;
  height:4rem;
  border-radius:50%;
}
.head-name{
  color:#3f3f3f;
}
.head-l{
  flex:1;
}
.head-r{
  flex:5;
}
.info-list li{
  line-height:32px;
}
.vux-tab .vux-tab-item{
  font-size:16px;
  color:#3f3f3f;
}
.info-list li span{
  background-color:#bababa;
  height:16px;
  width:16px;
  border-radius:50%;
  display:inline-block;
  margin:9px 8px 0 0px;
}
.weui-form-preview__item{
  position: relative;
}
.weui-form-preview__item .status{
  position: absolute;
  bottom:0px;
  right:0px;
  font-size:14px;
  color:#ff4d4d;
}
.weui-form-preview__item label span{
  background-color:#bababa;
  height:16px;
  width:16px;
  border-radius:50%;
  display:inline-block;
  margin:9px 8px 0 0px;
}
.weui-form-preview .weui-form-preview__bd{
  padding:0px;
}
.form-p{
  padding-top:8px;
  font-size:14px;
  text-align:right;
}
.weui-form-preview__label{
  color:#3f3f3f;
}
.weui-form-preview__value{
  float:right;
}
/* 数据为空 */
.no-data{
  margin-top:7rem!important;
}
/* 通知公告 */
.push{
  position: fixed;
  z-index:1005;
  top:50%;
  left:0;
  transform:translateY(-50%);
  -webkit-tansform:translateY(-50%);
  background-color:#fff;
  height:auto;
  width:70%;
  margin-left:12.5%;
  padding:1rem;
  border-radius:5px;
}
.push .title{
  font-size:20px;
  line-height:30px;
  text-align:center;
}
.push .content{
  padding:0.5rem 0;
  font-size:16px;
  text-align:left;
}
.push .foot{
  line-height:30px;
  text-align:center;
  font-size:20px;
  padding-top:5px;
  color:#1fe000;
  font-weight:500;
  border-top:1px solid #bababa;
}
</style>